<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<script setup>
import FilterBar from '@/components/FilterBar.vue'
import LevelActivityItem from '@/components/LevelActivityItem.vue'
// import TopBar from '@/components/TopBar.vue'
import { goBack, uniNavigateTo } from '@/utils'
import CustomApi from '@/service/custom'
import { getAllTown, getDictDetail, dictMap } from '@/service/dict'
import { useDictStore } from '@/store/dict'

const dictStore = useDictStore()

// 获取状态栏高度
const { statusBarHeight } = uni.getSystemInfoSync()

const townList = ref([])
const getTownList = async () => {
  const { code, result } = await getAllTown()
  if (code === 200 && result) {
    townList.value = result
  }
}
getTownList()

const categoryList = ref([])
const getDict = async () => {
  const { code, result } = await getDictDetail(dictMap.jointActivityCategory)
  if (code === 200 && result) {
    categoryList.value = result
  }
}
getDict()

// const filterList = ref([
//   { field: 'aa', columns: [{ label: '', value: '' }] },
//   { field: 'bb', columns: [{ label: '', value: '' }] },
// ])
const filterList = computed(() => {
  const { jointActivityCategory } = dictStore.dictData
  const cList = jointActivityCategory || categoryList.value
  return [
    {
      field: 'sysOrgCode',
      columns: [{ label: '全部乡镇', value: '' }, ...townList.value],
    },
    {
      field: 'category',
      columns: [{ label: '全部类型', value: '' }, ...cList],
    },
  ]
})

const filterParams = ref({
  sysOrgCode: '',
  category: '',
})
const handleChangeFilter = (val) => {
  console.log('va', val)
  filterParams.value.category = val.category.value
  filterParams.value.sysOrgCode = val.sysOrgCode.value
  refreshList()
}

// const tabList = ref([
//   { label: '镇级', value: 'all' },
//   { label: '村级', value: 'text' },
// ])
// const activeTab = ref('all')

// const handleCheckTab = (tab) => {
//   activeTab.value = tab.value
// }

/** ----------- 分页加载 start --------- */
const pageObj = ref({
  pageNo: 1,
  pageSize: 10,
})
const scrollState = reactive({
  refresherTriggered: false,
  dataList: [],
  loadState: 'loading',
})

const getDataList = async () => {
  if (scrollState.loadState === 'finished') return
  try {
    const params = {
      ...pageObj.value,
      ...filterParams.value,
      column: 'createTime',
      order: 'desc',
    }
    const { code, result } = await CustomApi.getCustomActivityPage(params)
    if (code === 200 && result) {
      const { records, pages } = result
      if (records?.length) {
        scrollState.dataList = [...scrollState.dataList, ...records]
      }
      if (pageObj.value.pageNo < pages) {
        pageObj.value.pageNo++
      } else {
        scrollState.loadState = 'finished'
      }
    } else {
      scrollState.loadState = 'error'
    }
  } catch (e) {
    scrollState.loadState = 'error'
  }
}

const reset = () => {
  pageObj.value.pageNo = 1
  scrollState.dataList = []
  scrollState.loadState = 'loading'
}

const onRefresherrefresh = async () => {
  scrollState.refresherTriggered = true
  await refreshList()
  scrollState.refresherTriggered = false
}

const refreshList = async () => {
  try {
    uni.showLoading()
    reset()
    await getDataList()
  } finally {
    uni.hideLoading()
  }
}

refreshList()
/** ----------- 分页加载 end --------- */
</script>

<template>
  <view class="common-page-bg">
    <view
      class="page-header"
      :style="{
        paddingTop: `${statusBarHeight}px`,
      }"
    >
      <!-- <image
        class="page-header-bg"
        src="@/static/images/menu-top-bg.png"
      ></image> -->
      <view class="page-header-nav">
        <view @tap="goBack()">
          <wd-icon
            name="chevron-left"
            size="56rpx"
            color="#fff"
          ></wd-icon>
        </view>
        <view class="page-header-nav-title">文化定制菜单</view>
      </view>
      <!-- <TopBar :tab-list="tabList" v-model:active-tab="activeTab" @check="handleCheckTab" /> -->
    </view>
    <view class="p-24rpx">
      <FilterBar
        :filter-list="filterList"
        @change="handleChangeFilter"
      />
    </view>
    <scroll-view
      class="scroll-container"
      scroll-y
      refresher-enabled
      enable-back-to-top
      :refresher-triggered="scrollState.refresherTriggered"
      @refresherrefresh="onRefresherrefresh"
      @scrolltolower="getDataList"
    >
      <template v-if="scrollState.dataList.length">
        <LevelActivityItem
          v-for="item in scrollState.dataList"
          :key="item.id"
          :info="item"
          @custom-click="
            uniNavigateTo(`/pages-sub/custom-menu/detail/index?id=${item.id}`)
          "
        />
        <wd-loadmore
          finished-text="没有更多了"
          :state="scrollState.loadState"
          @reload="getDataList"
        />
      </template>
      <wd-status-tip
        v-else
        image="content"
        tip="暂无内容"
      />
    </scroll-view>
    <!-- <view class="float-btn">
      <image class="w-full h-full" src="@/static/icons/float-btn-custom.png"></image>
    </view> -->
  </view>
</template>

<style lang="scss" scoped>
.common-page-bg {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.page-header {
  position: relative;
  z-index: 1;
  width: 100%;
  background-image: linear-gradient(90deg, #64e1ff 0%, #2f8de4 100%);
  box-sizing: border-box;

  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  &-nav {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    // width: 100%;
    height: 88rpx;
    padding: 0 24rpx;

    &-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 32rpx;
      color: #fff;
      font-weight: 500;
    }
  }
}

.scroll-container {
  padding: 0 24rpx;
  box-sizing: border-box;
}

.scroll-item {
  padding: 24rpx 16rpx;
  background: #fff;
  border-radius: 16rpx;

  &-wrap {
    width: 50%;
    padding: 12rpx;
  }

  &-img {
    width: 100%;
    height: 208rpx;
    margin-bottom: 24rpx;
    border-radius: 16rpx;
  }

  &-title {
    margin-bottom: 16rpx;
    font-size: 28rpx;
    color: $uni-text-color;
    font-weight: 500;
  }

  &-desc {
    margin-bottom: 16rpx;
    font-size: 24rpx;
    color: $uni-text-color-grey;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.float-btn {
  position: fixed;
  bottom: 100rpx;
  right: 24rpx;
  z-index: 1;
  width: 128rpx;
  height: 128rpx;
}
</style>
